<template>
  <el-card>
    <!-- 用户管理 -->
      <bread-crumb slot="header">
        <template slot="title">用户管理</template>
      </bread-crumb>
      <div class="Container">
        <div class="left_list">
          <div class="labesc">
          <el-tree :data="datas" :props="defaultProps" accordion node-key="label" @node-click="handleNodeClick">
            <div slot-scope="{node}">
              <i style="margin-right: 5px;" class="el-icon-document"></i>
              <el-tag style="cursor: pointer;">{{ node.label }}</el-tag>
            </div>
          </el-tree>
          </div>
        </div>
        <div class="right_Table">
          <el-button type="primary" @click="$router.push('/home/addUser')">新增人员</el-button>
          <div class="tabelskc">
              <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
                <el-table-column prop="name" label="姓名" ></el-table-column>
                <el-table-column prop="account" label="手机号" ></el-table-column>
                <el-table-column label="操作" >
                  <template slot-scope="{row}">
                    <el-button type="text" size="small" @click="disableAccount(row.id, 1)">启用</el-button>
                    <el-button type="text" size="small" @click="disableAccount(row.id, 0)">禁用</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
      </div>
  </el-card>
</template>

<script>
import { getRoleCity, listUserByCityCode, disableAccount } from '@/api'
export default {
  data () {
    return {
      tableData: [],
      datas: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created () {
    this.getRoleCity()
  },
  methods: {
    // 启用\禁用用户
    async disableAccount (id, status) {
      const data = {
        userId: id,
        status: status
      }
      const ser = await disableAccount(data)
      if (ser?.code === 200) {
        this.$message.success(ser.msg)
      }
    },
    // 获取城市列表
    async getRoleCity () {
      const ser = await getRoleCity()
      console.log(JSON.stringify(ser.data))
      if (ser?.code === 200) {
        this.datas = ser.data.data
      }
    },
    // 树状图点击事件
    async handleNodeClick (data) {
      console.log(data)
      const ser = await listUserByCityCode({ cityCode: data.id })
      if (ser?.code === 200) {
        this.tableData = ser.data
      }
    }
  }
}
</script>

<style lang="less" scoped>

  .tabelskc {
    width: 1000px;
    margin-top: 16px;
  }

  .Container {
    margin-left: -12px;
    display: flex;
    .right_Table {
      box-sizing: border-box;
      padding-left: 24px;
    }
    .left_list {
      width: 220px;
      height: calc(100vh - 64px);
      border-right: 1px solid #f0f0f0;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      padding: 0 24px 24px;
      overflow-x: hidden;

      .labesc {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        /deep/.el-tree {
          .el-tree-node {
            padding: 8px 0;
          }
        }
      }

    }
  }

</style>
